import React, { Component } from 'react'

export default class Child extends Component {
  constructor(){
    super()
    this.state={
      count:0,
      prevCount:0
    }
  }
  
  static getDerivedStateFromProps(nextProps,prevState){
    console.group('-----------getDerivedStateFromProps------------');
    console.log('nextProps',nextProps);
    console.log('prevState',prevState);
    console.groupEnd()
    /**
     * 第一次:
     * prevState.prevCount:0
     * nextProps.pnum:100
     * 进入到了if逻辑块中,此时完成了如下效果
     * prevState.count:100
     * prevState.prevCount:100
     * 第二次:
     * 1）父组件状态没有改变
     * nextProps.pnum：100
     * prevState.prevCount:100
     * 2）父组件状态发生改变
     * nextProps.pnum:101
     * prevState.prevCount:100
     * 进入到了if逻辑块中,此时完成了如下效果
     * prevState.count:101
     * prevState.prevCount:101
     * 
     */
    if(nextProps.pnum!=prevState.prevCount){
      return{
        count:nextProps.pnum,
        prevCount:nextProps.pnum
      }
    }
    return null
   
  }
  
  render() {
    console.log('------render----------');
    return (
      <div>
        <h1>子组件</h1>
        <h2>{this.state.count}</h2>
        <button onClick={()=>this.setState({count:this.state.count+1})}>+</button>
      </div>
    )
  }
}
